<template>
  <div class="computed-use">
    <div>
      姓: <input type="text" v-model="firstName" /> <br />
      名:<input type="text" v-model="lastName" /> <br />

      全名:{{ fullName }} <br />
      全名:{{ fullName }} <br />
      全名:{{ fullName }} <br />
      全名:{{ fullName }} <br />

      <button @click="handleChangeFullName">更新全名</button>
    </div>
    <div v-bind="$attrs">computed:</div>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref, useAttrs } from 'vue'

const firstName = ref('zhang')
const lastName = ref('san')

// 只读模式
// const fullName = computed(() => {
//   console.log('computed 执行的次数')
//   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })

// 可读可写
const fullName = computed({
  get() {
    console.log('computed 执行的次数')
    return (
      firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    )
  },
  set(val) {
    console.log('set触发了', val)
    const nameArr = val.split('-')
    firstName.value = nameArr[0]
    lastName.value = nameArr[1]
  },
})

const handleChangeFullName = () => {
  fullName.value = 'li-si'
}
defineOptions({
  inheritAttrs: false,
})
const author = reactive({
  name: 'John Doe',
  books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery'],
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
// 一个计算属性 ref
const publishedBooksMessage2 = computed(() => {
  return author.books.length > 0
    ? {
        name: 'zs',
        age: 111,
      }
    : { name: 'ls', age: 122 }
})
console.log('computed是什么类型的：', publishedBooksMessage)
console.log('computed是什么类型的：', publishedBooksMessage.value)
console.log('computed是什么类型的2：', publishedBooksMessage2)

const props = defineProps(['pageTitle', 'userInfo'])
console.log('props:', props)
console.log('props.pageTitle:', props.pageTitle)
console.log('props.userInfo:', props.userInfo)

const $attrs = useAttrs()
console.log('$attrs:', $attrs)
</script>
<style scoped></style>
